<script setup>

    import { onMounted, reactive, ref } from 'vue'
    import { tasksAPI } from '@/api/tasks'
    import { useUserStore } from '@/stores/user'
    import router from '@/router'

    const dateValue = ref([])
    const shortcuts = [
        {
            text: 'Last week',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
            },
        },
        {
            text: 'Last month',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
            },
        },
        {
            text: 'Last 3 months',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
            },
        },

    ]
    const userStore = useUserStore()

    const tasks = ref([])
    const currentPage = ref(1)
    const hasMore = ref(true)
    const isLoading = ref(false)
    const selectedStartDate = ref(null)
    const selectedEndDate = ref(null)
    const loadData = async (isLoadMore = false) => {
        if (isLoading.value || !hasMore.value) return

        isLoading.value = true
        console.log("isloading")
        try {
            const pageToLoad = isLoadMore ? currentPage.value + 1 : 1
            const params = {
                username: userStore.getUserInfo().value.username,
                page: pageToLoad,
                pagesize: 10,
            }
            console.log(userStore.getUserInfo().value.username)
            // 添加日期参数
            if (selectedStartDate.value && selectedEndDate.value) {
                params.startDate = selectedStartDate.value.toLocaleString()
                params.endDate = selectedEndDate.value.toLocaleString()
            }
            const res = await tasksAPI(params)
            console.log(res)
            // 是否需要加载更多？
            if (isLoadMore) {
                tasks.value = [...tasks.value, ...res.data]

                currentPage.value = pageToLoad
            } else {
                tasks.value = res.data
                currentPage.value = 1
            }
            hasMore.value = res.data.length >= params.pagesize


        } catch (error) {
            console.log(error)
        } finally {
            isLoading.value = false
        }
    }

    async function search() {
        console.log("search")
        selectedStartDate.value = dateValue.value[0]
        selectedEndDate.value = dateValue.value[1]
        hasMore.value = true
        await loadData(false)
    }

    function handleScrollLoad() {
        if (!isLoading.value && hasMore.value) {
            loadData(true)
        }
    }
    function loadOneTask(item) {

        console.log(item.Tid);
        // const url = `http://117.72.99.240:8082/tasks/task/${item.Tid}`;
        const baseUrl = import.meta.env.VITE_API_URL + ':' + import.meta.env.VITE_PORT;
        const url = `${baseUrl}/tasks/task/${item.Tid}`;
        window.open(url)
    }

    onMounted(async () => {
        
        await loadData(false)
    })

</script>


<template>
    <div class="demo-date-picker">
        <div class="block">
            <el-date-picker v-model="dateValue" type="daterange" unlink-panels range-separator="To"
                start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />
            <el-button class="search" type="primary" v-on:click="search">
                查询
            </el-button>
        </div>

    </div>
    <div class="text">任务列表</div>

    <div class="taskList">
        <ul v-infinite-scroll="handleScrollLoad" class="infinite-list" style="overflow: auto">
            <li v-for="item in tasks" :key="item.ID" class="infinite-list-item" v-on:click="loadOneTask(item)"
                :class="{ good: item.Percent > 50, bad: item.Percent <= 50 }">
                <a>Tid: {{ item.Tid }}</a>
                <p>RepoUrl: {{ item.RepoUrl }}</p>
                <p>Language: {{ item.Language }}</p>
                <p>Time: {{ item.CreatedAt }}</p>
                <p>Percent: {{ item.Percent }}</p>

            </li>
        </ul>

    </div>


</template>

<style scoped>
    .infinite-list {
        height: 540px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .infinite-list .infinite-list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 120px;
        margin: 8px;
    }

    .infinite-list .infinite-list-item+.list-item {
        margin-top: 10px;
    }

    .text {
        margin-top: 10px;
        text-align: center;
        background-color: aliceblue;
    }

    .search {
        margin-left: 8px;
    }

    .bad {
        color: white;
        background-color: rgba(255, 0, 0, 0.7);
    }

    .bad:hover {
        background-color: red;
    }

    .good {
        color: white;
        background-color: green;

    }

    .good:hover {
        background-color: rgba(0, 128, 0, 0.7);
    }

    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-date-picker .block {
        padding: 15px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-date-picker .block:last-child {
        border-right: none;
    }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>